<template>
	<view class="container-bottom-btns">
		<view class="form">
			<view class="form-column-item">
				<view class="label">手机号</view>
				<view class="content">
					<input v-model="form.phone" placeholder-class="placeholder-input" maxlength="11" type="tel"
						placeholder="请输入手机号" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">验证码</view>
				<view class="content">
					<input placeholder-class="placeholder-input" v-model="form.code" type="number" placeholder="请输入验证码" />
					<view class="sms-code flex-xy-center" @tap="sendSms" :class="{disabled: timer}">
						{{timer ? countdown + 's后重发' : '获取验证码'}}
					</view>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">新密码</view>
				<view class="content">
					<input v-model="form.password" placeholder-class="placeholder-input" type="password" placeholder="请输入新密码" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">确认密码</view>
				<view class="content">
					<input v-model="form.verifyPassword"  placeholder-class="placeholder-input" type="password" placeholder="请再次输入密码" />
				</view>
			</view>
			
		</view>
		
		<view class="bottom-btn-wrapper">
			<SubmitBtn text="提交" @click="submit"></SubmitBtn>
		</view>

	</view>
</template>

<script>
	import {
		toast,
		backTo
	} from '../../utils/uni-api';
	import validate from '@/utils/validate.js'
	import { forgetPassword } from '@/api/user.js'
	import { sendSmsCode } from '@/api/common.js'
	export default {
		
		data() {
			return {
				form: {
					phone: '',
					code: '',
					password: '',
					verifyPassword: '',
				},
				countdown: 59,
				timer: '',
				isAgree: false
			};
		},
		methods: {
			sendSms() {
				if (!validate.isNotEmpty(this.form.phone, '手机号')) return
				if (!validate.isPhone(this.form.phone, '手机号')) return
				if (this.timer) return
				sendSmsCode({phone: this.form.phone, use: 3}).then(res => {
					toast('验证码发送成功')
					this.timer = setInterval(() => {
						this.countdown--;
						if (this.countdown < 1) {
							clearInterval(this.timer)
							this.timer = ''
							this.countdown = 59
						}
					}, 1000)
				})
			},
			submit() {
				if (!validate.isNotEmpty(this.form.phone, '手机号')) return
				if (!validate.isPhone(this.form.phone, '手机号')) return
				if (!validate.isNotEmpty(this.form.code, '验证码')) return
				if (!validate.isNotEmpty(this.form.password, '新密码')) return
				if (!validate.isNotEmpty(this.form.verifyPassword, '确认密码')) return
				if (this.form.password !== this.form.verifyPassword) {
					return toast('两次输入密码不一致')
				}
				forgetPassword(this.form).then(res => {
					toast('密码重置成功', true)
					setTimeout(() => {
						backTo('/pages/user/login')
					}, 800)
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.sms-code {
		width: 163rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx solid $theme-color;
		font-weight: normal;
		font-size: 25rpx;
		color: $theme-color;
	}

	.disabled {
		border: 1rpx solid #d1d1d1;
		color: #d1d1d1;
	}
	
</style>